<template>
	<view class="box">
		<!-- 这里是状态栏 -->
		<view class="status_bar"></view>
		<!-- 内容 -->
		<view :style="{ filter: isBgShow||isPoster ? 'blur(5rpx)' : '' }">
			<view class="header">
				<!-- icon -->
				<view style="padding: 32rpx 0 44rpx 0">
					<image style="width: 138rpx; height: 42rpx"
						src="https://files.yzsheng.com/bussiness/imgs/franchisee/icon.png"></image>
				</view>
				<!-- card -->
				<view class="card">
					<view style="position: absolute;right: 0;">
						<image style="width: 702rpx;" src="https://files.yzsheng.com/bussiness/imgs/franchisee/bg.png">
						</image>
					</view>
					<view class="flex flex-jc-sb card-title">
						<view>累计收益</view>
						<view class="flex flex-ai-c" style="position: relative;z-index: 11;"
							@click="goPage('/pages_washCar/funds/fundsList', '')">
							<view>明细</view>
							<view>
								<u-icon name="arrow-right" size="22rpx" color="#201506"></u-icon>
							</view>
						</view>
					</view>

					<view class="card-price">{{money.accumulated_income||'0.00'}}</view>
					<view style="position: relative;">
						<view class="flex flex-jc-sb flex-ai-c card-profit">
							<view class="flex">
								<view style="margin-right: 10rpx;">
									<i-icon icon='iconyue' size='42rpx' color='#5D3807'></i-icon>
								</view>
								<view>
									<view class="font-22"><text>可提现余额 (元)</text></view>
									<view class="fwb font-36">{{money.withdrawable_balance||'0.00'}}</view>
								</view>
							</view>
							<!-- <view style="width: 1rpx; height: 36rpx; background-color: #5d3807"></view> -->
							<view class="flex" style="margin-right: 50rpx;">
								<view style="margin-right: 10rpx;">
									<i-icon icon='iconjindutiaoshouyidaozhang' size='34rpx' color='#5D3807'></i-icon>
								</view>
								<view>
									<view class="font-22">昨日收益 (元)</view>
									<view class="fwb font-36">{{money.yesterday_income||'0.00'}}</view>
								</view>
							</view>
						</view>
						<view
							style="width: 1rpx; height: 36rpx; background-color: #BD9054;position: absolute;right: 50%;top: calc(50% - 48rpx);">
						</view>
						<view
							style="width: 1rpx; height: 36rpx; background-color: #BD9054;position: absolute;right: 50%;top: 50%;">
						</view>
						<view class="flex flex-jc-sb flex-ai-c card-profit">
							<view class="flex">
								<view style="margin-right: 10rpx;">
									<i-icon icon='iconkaisuo_huaban1' size='38rpx' color='#5D3807'></i-icon>
								</view>
								<view>
									<view class="font-22" style="position: relative;">
										<text>待验收解冻金额 (元)</text>
										<view style="position: absolute;right: -38rpx;top: 0rpx;"
											@click="isAcceptance = true">
											<i-icon icon='iconicon-yiwen' size='30rpx' color='#FFFFFF'></i-icon>
										</view>
									</view>
									<view class="fwb font-36">{{money.defrost_amount||'0.00'}}</view>
								</view>
							</view>
							<view class="flex" style="margin-right: 50rpx;">
								<view style="margin-right: 10rpx;">
									<i-icon icon='iconsuo' size='34rpx' color='#5D3807'></i-icon>
								</view>
								<view>
									<view class="font-22" style="position: relative;">
										<text>冻结金额 (元)</text>
										<view style="position: absolute;right: -38rpx;top: 0rpx;"
											@click="isFrozen = true">
											<i-icon icon='iconicon-yiwen' size='30rpx' color='#FFFFFF'></i-icon>
										</view>
									</view>
									<view class="fwb font-36">{{money.account_frozen||'0.00'}}</view>
								</view>
							</view>
						</view>
					</view>


					<!-- 提现 -->
					<view class="card-btn flex flex-jc-c flex-ai-c" style="position: relative;z-index: 11;"
						@click="toTixianPage" v-if="menber!==3">
						提现
					</view>
				</view>

				<!-- menu（加盟商） -->
				<view class="menu flex flex-jc-sa" v-if="auth !== 'Agency'">
					<view v-for="(item, index) in list" :key="item.id" @click="goPage(item.url, item.text)">
						<view>
							<image :src="item.icon" style="width: 80rpx; height: 80rpx"></image>
						</view>
						<view style="font-size: 24rpx;color: #666666;">{{ item.text }}</view>
					</view>
				</view>
			</view>

			<!-- 我的商户（代理商） -->
			<view class="merchant" v-if="auth === 'Agency'">
				<view class="flex flex-jc-sb flex-ai-c merchant-title">
					<view class="flex flex-ai-c">
						<view class="line"></view>
						<view style="font-size: 34rpx; font-weight: 500">我的商户</view>
					</view>
					<view class="flex flex-ai-c" style="color: #999999; font-size: 24rpx"
						@click="goPage('/pages_washCar/myStore/myStore', '')">
						<view>更多</view>
						<view>
							<u-icon name="arrow-right" size="22rpx" color="#999999"></u-icon>
						</view>
					</view>
				</view>

				<view class="flex flex-jc-sa flex-ai-c" style="text-align: center">
					<view>
						<view class="fwb merchant-number">{{money.merchant_num}}</view>
						<view class="merchant-text">累计商户（人）</view>
					</view>
					<view style="width: 2rpx; height: 50rpx; background-color: #eeeeee"></view>
					<view>
						<view class="fwb merchant-number">{{money.machine_num}}</view>
						<view class="merchant-text">累计洗车机</view>
					</view>
				</view>
			</view>
			<!-- goPage -->
			<view class="link">
				<view v-for="(item, index) in pageListArr" :key="item.id" @click="goPage(item.url, item.text)"
					style="position: relative">
					<view class="flex flex-ai-c flex-jc-sb link-list" :style="{ border: item.id === 4 ? '0' : '' }">
						<view class="flex flex-ai-c li-ht" style="width: 80%;">
							<view style="width: 10%;">
								<i-icon :icon="item.icon" :color="item.color" :size="item.size"></i-icon>
							</view>
							<view>{{ item.text }}</view>
						</view>
						<!-- deviceTotalPayoff设备 -->
						<!-- v-if="money.infrastructure_Payoff" -->
						<view v-if="item.id===1" class="flex flex-ai-c flex-jc-fe">
							<view style="color: #999999;"><text style="color: #60C534;"
									class="fwb">{{money.infrastructure_Payoff}}</text>/{{money.infrastructure_Cost}}
							</view>
						</view>
						<view v-if="item.id===0" class="flex flex-ai-c flex-jc-fe">
							<view style="color: #999999;"><text style="color: #60C534;"
									class="fwb">{{money.deviceTotalPayoff}}</text>/{{money.devicesTotalCost}}</view>
						</view>

						<view v-if="item.id===2" class="flex flex-ai-c flex-jc-fe">
							<view style="color: #999999;">{{total===0?'未绑定':'已绑定'}}</view>
						</view>
						<view>
							<u-icon name="arrow-right" size="24rpx" color="#999999"></u-icon>
						</view>
					</view>
					<view style="width: 640rpx; position: absolute; right: 0; right: 32rpx">
						<u-line color="#EEEEEE" />
					</view>
				</view>
			</view>
		</view>

		<!-- 模态背景 -->
		<view class="bg" v-show="isBgShow||isPoster"></view>
		<!-- 电话框 -->
		<view class="phone" v-show="isBgShow">
			<view class="phone-1">
				<view style="border-bottom: 2rpx solid #eeeeee" @click="onMobile">点击拨打</view>
				<view class="mobile fwb font-34">{{ `${this.$store.state.user.servicePhone}` | filterTel }}</view>
			</view>
			<view class="phone-2 mobile" @click="isBgShow = false">取消</view>
		</view>

		<!-- 推广 -->
		<view class="phone" v-show="isPoster">
			<view class="phone-1">
				<view class="font-34" style="border-bottom: 2rpx solid #eeeeee;color: #333333;font-weight: 500;">选择推广方式
				</view>
				<view style="line-height: 40rpx;padding: 22rpx 0;border-bottom: 2rpx solid #eeeeee"
					@click="onPoster(1)">
					<view class="mobile font-30">套餐年卡推广</view>
					<view class="font-24" style="color: #999999;">绑定用户，购买套餐获得利益</view>
				</view>
				<!-- <view style="line-height: 40rpx;padding: 22rpx 0;" @click="onPoster(2)">
					<view class="mobile font-30">邀请用户</view>
					<view class="font-24" style="color: #999999;">送用户免费洗车券</view>
				</view> -->
			</view>
			<view class="phone-2" style="color: #F30000;" @click="isPoster = false">取消</view>
		</view>

		<u-modal title="冻结金额" v-model="isFrozen" :title-style="titleStyle" :show-confirm-button="false">
			<view class="model-content">
				即订单核销结算金，每台设备每天
				需保证最低500元！退出可退还
			</view>
			<view class="model-title" @click="isFrozen = false">
				朕知道了！
			</view>
		</u-modal>
		<u-modal title="待验收冻结金额" v-model="isAcceptance" :title-style="titleStyle" :show-confirm-button="false">
			<view class="model-content">
				站点还未建成或验收合格之前，通过
				营销推广等其他方式售卖的会员卡，
				资金需验收合格方可解冻！
			</view>
			<view class="model-title" @click="isAcceptance = false">
				朕知道了！
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		props: ['auth'],
		data() {
			return {
				titleStyle: {
					'font-weight': 'bold',
					'font-size': '34rpx'
				},
				isFrozen: false, //是否显示冻结
				isAcceptance: false, //是否显示待验收
				menber: 0, //是否是成员
				phone: '15682008662',
				isPoster: false,
				menuList: [{
						id: 0,
						icon: 'https://files.yzsheng.com/bussiness/imgs/franchisee/zhandian.png',
						text: '站点运维',
						url: '/pages_washCar/siteMgt/siteMgt',
					},
					{
						id: 1,
						icon: 'https://files.yzsheng.com/bussiness/imgs/franchisee/jingyin.png',
						text: '经营报表',
						url: '/pages_washCar/report_form/report_form',
					},
					{
						id: 3,
						icon: 'https://files.yzsheng.com/bussiness/imgs/franchisee/qx.png',
						text: '权限管理',
						url: '/pages_washCar/sitePermission/sitePermission',
					},
					{
						id: 2,
						icon: 'https://files.yzsheng.com/bussiness/imgs/franchisee/yingxiao.png',
						text: '营销推广',
						url: '/pages_washCar/poster/poster',
					},
				],
				pageList: [{
						id: 0,
						icon: 'iconshebei_huaban1',
						text: '投入设备回本（元）',
						url: '/pages_washCar/putEquipment/putEquipment',
						color: '#66BAFF',
						size: '30rpx'
					},
					{
						id: 1,
						icon: 'iconwoyaotouzi00',
						text: '投入基建回本（元）',
						url: '/pages_washCar/putEquipment/putInfrastructure',
						color: '#66C479',
						size: '30rpx'
					}, {
						id: 2,
						icon: 'iconyinhangka',
						text: '银行卡',
						url: '',
						color: '#FBD220',
						size: '30rpx'
					},
					{
						id: 3,
						icon: 'iconkefu1',
						text: '客户服务',
						url: '',
						color: '#66C479',
						size: '45rpx',
					},
					{
						id: 4,
						icon: 'iconshezhi',
						text: '设置',
						url: '/pages_common/pages_me/setting/setting',
						color: '#66BAFF',
						size: '37rpx',
					},
				],
				isSetPayPsd: false,
				totalAssert: '0.00',
				isBgShow: false,
				money: {},
				list: [],
				total: 0,
				pageListArr: []
			}
		},

		mounted() {
			this.getAssets()
			this.IsExistPayPwd()
			if (this.menber === 2) {
				this.getBankCardList()
			}
			
			/* if (this.auth === 'Construction' || this.auth==='Resource') { //合伙人
				this.pageList.map((item) => {
					if (item.id !== 0) {
						this.pageListArr.push(item)
					}
				})
			} else if (this.auth === 'League' || this.auth === 'Place') { //加盟商 场地方
				this.pageList.map((item) => {
					if (item.id !== 0 && item.id !== 1) {
						this.pageListArr.push(item)
					}
				})
			} else if (this.auth === 'Equipment' || this.auth === 'ChildEquipment') { //设备方 子设备方
				this.pageList.map((item) => {
					if (item.id !== 1) {
						this.pageListArr.push(item)
					}
				})
			} else {
				this.pageList.map((item) => {
					if (item.id !== 0 && item.id !== 1) {
						this.pageListArr.push(item)
					}
				})
			}
			if (this.auth === 'ChildEquipment') {
				this.menuList.map((item) => {
					if (item.id !== 3 && item.id !== 0) {
						this.list.push(item)
					}
				})
			} else {
				this.list = this.menuList
			} */

		},
		created() {
			this.getSelfServiceCarHomePage()
			this.GetStoreMerchantTypeList()
			this.menber = uni.getStorageSync('Ztc_B_USER_INFO').role
		},
		filters: {
			filterTel(tel) {
				let reg = /^(\d{3})\d*(\d{4})$/
				return tel.replace(reg, '$1****$2')
			},
		},
		methods: {
			//跳转银行卡
			banCard() {
				this.$api.bindbank.GetCertificationProgress({
					type: 1
				}).then(res => {
					if (res.data.authentication) {
						if (res.data.audit === 3) {
							if (res.data.bindPhone) {
								if (res.data.contractNo) {
									uni.navigateTo({
										url: '/pages_common/pages_me/assets/cash/cash?total=' + this
											.totalAssert
									})
								} else {
									uni.navigateTo({
										url: '/pages_common/pages_me/assets/agreement/agreement'
									})
								}
							} else {
								uni.navigateTo({
									url: '/pages_common/pages_me/assets/bindPhone/bindPhone'
								})
							}

						} else {
							uni.navigateTo({
								url: '/pages_common/pages_me/assets/auditResult/auditResult',
							})
						}
					} else {
						uni.navigateTo({
							url: '/pages_common/pages_me/assets/bankCardManagement/bankCardManagement',
						})
					}
				})

			},
			async GetStoreMerchantTypeList() {
				try {
					let data = {
						'storeId': this.$store.state.userInfoDetail.store.storeId,
					}
					const res = await this.$api.washCar.GetStoreMerchantTypeList(data)
					this.list = []
					this.pageListArr = []
					//子设备方成员menu权限（设备0）
					if (this.menber === 3) {
						this.pageList.map((item) => {
							if (item.id !== 0) {
								this.pageListArr.push(item)
							}
						})
						this.menuList.map((item) => {
							if (item.id !== 3) {
								this.list.push(item)
							}
						})
						return
					}
					if(res.data.isOrdinary){
						console.log(0)
						this.pageList.map((item) => {
							this.pageListArr.push(item)
						})
					}else if(res.data.isConstruction&&res.data.isEquipment){ //设备方包含基建方
						console.log(1)
						this.pageList.map((item) => {
							this.pageListArr.push(item)
						})
					}else if(res.data.isConstruction){//基建
						console.log(2)
						this.pageList.map((item) => {
							if (item.id !== 0) {
								this.pageListArr.push(item)
							}
						})
						if(res.data.isChildEquipment||res.data.isEquipment){//基建有子设备和资源方
							this.pageList.map((item) => {
								if (item.id === 0) {
									this.pageListArr.unshift(item)
								}
							})
						}
					}else if(res.data.isEquipment){//设备
						this.pageList.map((item) => {
							if (item.id !== 1) {
								this.pageListArr.push(item)
							}
						})
						if(res.data.isConstruction){
							this.pageList.map((item) => {
								if (item.id === 1) {
									this.pageListArr.push(item)
								}
							})
						}
					}else if(res.data.isChildEquipment){//子设备
						this.pageList.map((item) => {
							if (item.id !== 1) {
								this.pageListArr.push(item)
							}
							if(res.data.isConstruction){
								this.pageList.map((item) => {
									if (item.id === 1) {
										this.pageListArr.push(item)
									}
								})
							}
						})
					}else if(res.data.isResource){//资源
						this.pageList.map((item) => {
							if (item.id !== 0) {
								this.pageListArr.push(item)
							}
						})
						if(res.data.isChildEquipment||res.data.isEquipment){//基建有子设备和资源方
							this.pageList.map((item) => {
								if (item.id === 0) {
									this.pageListArr.unshift(item)
								}
							})
						}
					}else{ //场地没有
						this.pageList.map((item) => {
							if (item.id !== 1 && item.id !==0) {
								this.pageListArr.push(item)
							}
						})
					}
					this.list = this.menuList
				} catch (e) {
					//TODO handle the exception
				}
			},
			async getSelfServiceCarHomePage() {
				let isleague = this.auth === 'League' ? true : false
				try {
					let data = {
						'storeId': this.$store.state.userInfoDetail.store.storeId,
						'isleague': isleague
					}
					const res = await this.$api.washCar.getSelfServiceCarHomePage(data)
					this.money = res.data

				} catch (e) {
					//TODO handle the exception
				}
			},
			onPoster(type) {
				console.log(type)
				if (type === 1) { //邀请
					uni.navigateTo({
						url: '/pages_washCar/poster/selectSite'
					})

				} else if (type === 2) {
					uni.navigateTo({
						url: '/pages_washCar/poster/poster'
					})
				}
				this.isPoster = false
			},
			onMobile() {
				uni.makePhoneCall({
					phoneNumber: `${this.$store.state.user.servicePhone}`
				})
			},
			goPage(url, text) {
				if (text === '客户服务') {
					this.isBgShow = true
				} else if (text === '营销推广') {
					this.isPoster = true
				} else if (text === '银行卡') {
					if (this.menber === 2) {
						this.banCard()
					} else {
						uni.showToast({
							title: '当前账户没有权限查看',
							icon: 'none'
						})
					}
				} else {
					uni.navigateTo({
						url: url,
					})
				}
			},
			//是否设置支付密码
			async IsExistPayPwd() {
				try {
					const res = await this.$api.user.IsExistPayPwd()
					this.isSetPayPsd = res.data
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			// 获取是否绑定银行卡
			getBankCardList() {
				this.$api.user
					.getBankCardList({
						pageIndex: 1,
						pageSize: 100,
					})
					.then(res => {
						if (res.data.total !== 0) {
							// this.list = res.data.list
							this.total = res.data.total
						}
					})
					.catch(e => {
						console.log(e)
					})
			},
			//获取资产情况
			getAssets() {
				this.$api.user
					.getAssets({
						storeid: this.$store.state.userInfoDetail.store.storeId,
					})
					.then((res) => {
						this.totalAssert =
							Math.floor(
								(new Number(res.data.store_balance) +
									new Number(res.data.deposit_balance)) *
								100
							) / 100
					})
					.catch((e) => {
						console.log(e)
					})
			},
			//提现
			toTixianPage() {
				if (this.isSetPayPsd) {
					if (this.totalAssert) {
						this.$api.bindbank
							.GetCertificationProgress({
								type: 1
							})
							.then((res) => {
								if (res.data.authentication) {
									if (res.data.audit === 3) {
										if (res.data.bindPhone) {
											if (res.data.contractNo) {
												uni.navigateTo({
													url: '/pages_common/pages_me/assets/cash/cash?total=' +
														this
														.totalAssert
												})
											} else {
												uni.navigateTo({
													url: '/pages_common/pages_me/assets/agreement/agreement'
												})
											}
										} else {
											uni.navigateTo({
												url: '/pages_common/pages_me/assets/bindPhone/bindPhone'
											})
										}

									} else {
										uni.navigateTo({
											url: '/pages_common/pages_me/assets/auditResult/auditResult',
										})
									}
								} else {
									uni.navigateTo({
										url: '/pages_common/pages_me/assets/bankCardManagement/bankCardManagement',
									})
								}

							})
						// uni.showToast({
						//   title: '敬请期待',
						//   icon: 'none',
						// })
					} else {
						uni.showToast({
							title: '当前无可提现金额',
							icon: 'none',
						})
					}
				} else {
					uni.showToast({
						title: '请先设置支付密码',
						icon: 'none',
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages_common/pages_me/assets/setPassword/setPsd',
						})
					}, 1200)
				}
			},
		},
	}
</script>

<style lang="scss">
	.model-content {
		margin: 26rpx 61rpx;
		color: #666666;
		font-size: 28rpx;
		text-align: center;
	}

	.model-title {
		font-size: 30rpx;
		color: #38ACFF;
		text-align: center;
		line-height: 100rpx;
		border-top: 2rpx solid #EEEEEE;
	}

	.line {
		margin-right: 17rpx;
		width: 8rpx;
		height: 34rpx;
		background: #ffe23e;
		border-radius: 4rpx;
	}

	// 状态栏占位
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
		position: relative;
		z-index: 99;
	}

	.mobile {
		color: #38acff;
	}

	.phone {
		position: fixed;
		bottom: 0;
		left: 30rpx;
		z-index: 12;
		text-align: center;

		.phone-1 {
			width: 690rpx;
			line-height: 100rpx;
			background: #ffffff;
			opacity: 0.9;
			border-radius: 20rpx;
		}

		.phone-2 {
			margin: 20rpx 0 30rpx 0;
			width: 690rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #ffffff;
			border-radius: 20rpx;
		}
	}

	.bg {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 10;
		background-color: #000000;
		opacity: 0.3;
	}

	.li-ht {
		line-height: 100%;
	}

	.font-22 {
		font-size: 22rpx;
	}

	.fwb {
		font-weight: bold;
	}

	.box {
		min-height: 100vh;
		background-color: #f6f6f6;

		.header {
			padding: 0 24rpx;
			background-color: #fff;
		}

		//卡片
		.card {
			position: relative;
			padding: 0 22rpx 28rpx 43rpx;
			background: linear-gradient(-90deg, #ffc742, #ffe44a);
			box-shadow: 0 0 18rpx 0 rgba(244, 211, 4, 0.39);
			border-radius: 20rpx;
			overflow: hidden;

			//卡片标题
			.card-title {
				padding: 29rpx 0 0 0;
				font-size: 24rpx;
			}

			.card-price {
				font-weight: bold;
				color: #201506;
				font-size: 54rpx;
			}

			.card-profit {
				margin-top: 20rpx;
			}

			// 按钮
			.card-btn {
				width: 620rpx;
				height: 70rpx;
				background: #ffffff;
				box-shadow: 0 0 9rpx 0 rgba(0, 0, 0, 0.1);
				border-radius: 35rpx;
				color: #fbb000;
				font-size: 28rpx;
				margin-top: 28rpx;
			}
		}

		// 菜单
		.menu {
			text-align: center;
			padding: 35rpx 0 24rpx 0;
		}

		//跳转
		.link {
			line-height: 90rpx;
			background-color: #fff;
			margin-top: 20rpx;

			.link-list {
				margin: 0 33rpx 0 43rpx;
				// border-bottom: 2rpx solid #EEEEEE;
			}
		}
	}

	// 代理商(我的商户)
	.merchant {
		background-color: #fff;
		padding-bottom: 27rpx;

		.merchant-title {
			padding: 38rpx 34rpx 30rpx 42rpx;
		}

		.merchant-number {
			color: #f30000;
			font-size: 42rpx;
		}

		.merchant-text {
			font-size: 24rpx;
			color: #666666;
		}
	}
</style>
